<style lang="less" scoped>
@import "./withdraw.less";
</style>
<template>
  <div>
      <Row>
            <Col span="24">
                <Card>
                    <p slot="title" style="height: 32px">
                            提现总额:<span style="color:#f00">&yen;{{ created }}</span>
                            <div>
                        <Form :model="searchForm" inline>
                          <FormItem prop="audit">
                              <Select v-model="searchForm.audit" @on-change="getList" width="120px">
                                <Icon type="ios-person-outline" slot="prepend"></Icon>
                                  <Option  :value=0 :key=0>待审核</Option>
                                  <Option  :value=1 :key=1>审核成功</Option>
                                  <Option  :value=2 :key=2>审核失败</Option>
                                  <!-- <Option  :value=3 :key=3>已出租</Option> -->
                                  <!-- <Option  :value=4 :key=4>回收站</Option> -->
                              </Select>
                          </FormItem>
                          <FormItem prop="status">
                              <Select v-model="searchForm.status" @on-change="getList">
                                <Option  :value=0 :key=0>待审核</Option>
                                <Option  :value=1 :key=1>提现成功</Option>
                                <Option  :value=2 :key=2>提现失败</Option>
                              </Select>
                          </FormItem>
                      </Form>
                    </div>
                    </p>
                    <div>
                            <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
                    </div>
                    <div class="margin-top-15" style="text-align: center">
                            <Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
                    </div>
                </Card>
            </Col>
        </Row>
        <Modal v-model="audits.show" :style="{top:'30px'}">
          <RadioGroup v-model="audits.result">
            <Radio true-value=1 false-value=0 label="1">审核通过</Radio>
            <Radio true-value=1 false-value=0 label="2">审核不通过</Radio>
          </RadioGroup>
          <template v-if="audits.result==2">
            <Input v-model="audits.msg" style="margin-top:20px" type="textarea" :autosize="{minRows: 2,maxRows: 4}" placeholder="Enter something..."></Input>
          </template>
          <div slot="footer">
            <Button @click="submit">确认</Button>
          </div>
        </Modal>
  </div>
</template>
<script>
const resourse = "withdraw";
const audit =(vm, h, currentRow, index)=>{
  if(currentRow.audit==0){
    return h('Button',{
      props:{
        type:'primary'
      },
      style:{
        margin: '0 5px'
      },
      on:{
        click:()=>{
          vm.audits.id = currentRow.id
          vm.audits.show=true
        }
      }
    },'审核')
  }
  else{
    return h('Tag',{
      props:{
        type:'border',
        color:currentRow.audit==1?'green':'red'
      }
    },currentRow.audit==1?'通过':'不通过')
  }
}
import axios from "axios";
export default {
  data() {
    return {
      columnsList: [
        {
          title: "序号",
          type: "index",
          align: "center"
        },
        {
          title: "订单号",
          key: "order_id",
          align: "center"
        },
        {
          title: "昵称",
          //   key: "title",
          align: "center",
          render: (h, params) => {
            return h("div", params.row.user.name);
          }
        },
        {
          title: "用户",
          //   key: "title",
          align: "center",
          render: (h, params) => {
            return h("div", params.row.user.real_name);
          }
        },
        {
          title: "手机号",
          //   key: "title",
          align: "center",
          render: (h, params) => {
            return h("div", params.row.user.phone);
          }
        },
        {
          title: "提现金额",
          key: "money",
          align: "center"
        },
        {
          title: "时间",
          key: "create_time",
          align: "center"
        },
        {
          title:"审核状态",
          key:'handle',
          align:'center',
          handle:['audit']
        },
        {
          title:'状态',
          align:'center',
          render:(h,params)=>{
            return h('Tag',{
              props:{
                color:params.row.status==1?'green':'red'
              }
            },params.row.status==1?'提现成功':params.row.audit==0?'待审核':'提现失败')
          }
        }
      ],
      tableData: [],
      tableShow: {
        listCount: 0,
        page: 1,
        size: 10
      },
      created: 0.0,
      audits:{
        id:0,
        show:false,
        result:"1",
        msg:''
      },
      searchForm:{
        audit:0,
        status:0
      }
    };
  },
  created() {
    axios.get('withdraw/total').then(response=>{
      let res = response.data
      if(res.code === 200){
        this.created = res.data.total
        
      }else{
        if(res.code === 403){
          this.$store.commit("logout", this);
            this.$router.push({
              name: "login"
            });
        }else{
          this.$Message.error(res.msg)
        }
      }
    })
    this.init();
    this.getList();
  },
  methods: {
    init(){
      this.columnsList.forEach(item=>{
        if(item.key=='handle'){
          item.render = (h, param) => {
            let currentRowData = this.tableData[param.index];
            return h("div", [audit(this, h, currentRowData, param.index)]);
          };
        }
      })
    },
    changePage(page) {
      this.tableShow.page = page;
      this.getList();
    },
    changeSize(size) {
      this.tableShow.size = size;
      this.getList();
    },
    getList() {
      axios.get(resourse,{params:{page:this.tableShow.page,size:this.tableShow.size,audit:this.searchForm.audit,status:this.searchForm.status}}).then(response => {
        let res = response.data;
        if (res.code === 200) {
          this.tableData = res.data.list;
          this.tableShow.listCount = res.data.count
        } else {
          if (res.code === 403) {
            this.$store.commit("logout", this);
            this.$router.push({
              name: "login"
            });
          } else {
            this.$Message.error(res.msg);
          }
        }
      });
    },
    submit(){
      axios.post('audit',{id:this.audits.id,result:this.audits.result,msg:this.audits.msg}).then(response=>{
        let res = response.data;
        if (res.code === 200) {
          this.getList()
        } else {
          if (res.code === 403) {
            this.$store.commit("logout", this);
            this.$router.push({
              name: "login"
            });
          } else {
            this.$Message.error(res.msg);
          }
        }
        this.audits.show =false
        this.getList();
      })
    }
  }
};
</script>

